import React, { Component } from 'react';
import { StyleSheet, View, Image, Alert, ScrollView } from 'react-native';
import SyanImagePicker from 'react-native-syan-image-picker';
import { Flex, Button, Modal } from '@ant-design/react-native';
import { getImageFile } from '~/utils/request';
import { connect } from 'react-redux';

const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
    };
};
class Album extends Component {
    constructor(props) {
        super(props);
        console.log(this.props.userinfo.identity);
        this.state = {
            tu: [],
            visible: false,
            files: [],
            id: this.props.id,
            name: this.props.name,
            spinner: this.props.spinner,
        };
    }
    setFiles = () => {
        let files = [];
        this.state.tu.forEach((file) => { 
            files.push(getImageFile(file, this.state.name));
        });
        this.setState(
            {
                files,
            },
            () => {
                this.props.onSelect(this.state.files);
            },
        );
    };

    onPress = () => {
        this.setState({
            visible: true,
        });
    };
    onClose = () => {
        this.setState({
            visible: false,
        });
    };

    //打开选择器: 选择多张图片
    _openPicker = () => {
        const options = {
            imageCount: this.props.userinfo.identity === 11 ? 1 : 6, // 最大选择图片数目，默认6
            isCamera: true, // 是否允许用户在内部拍照，默认true
            isCrop: false, // 是否允许裁剪，默认false
            isRecordSelected: true,
            isGif: false, // 是否允许选择GIF，默认false，暂无回调GIF数据
            showCropCircle: false, // 是否显示圆形裁剪区域，默认false
            showCropFrame: true, // 是否显示裁剪区域，默认true
            showCropGrid: false, // 是否隐藏裁剪区域网格，默认false
            quality: 90,//压缩质量
        };
        SyanImagePicker.showImagePicker(options, (err, selectedPhotos) => {
            if (err) {
                // 取消选择
                return;
            }
            //选择成功，渲染图片       
            if (this.state.spinner === 1) {
                this.setState(
                    {
                        // tu: selectedPhotos,
                        tu: this.props.userinfo.identity === 11 ? selectedPhotos : this.state.tu.concat(selectedPhotos),
                    },
                    () => {
                        SyanImagePicker.removeAllPhoto();
                        this.setFiles();
                    },
                );
            } else {
                Toast.info(r.msg, 1);
                SyanImagePicker.removeAllPhoto();
            }
        });
    };
    handleDeletePhoto = (index) => {
        const tu = this.state.tu.filter((photo, photoIndex) => photoIndex !== index);
        // 更新原生图片数组
        SyanImagePicker.removePhotoAtIndex(index);
        if (this.state.id === 1) {
            this.props.onDelete(index);
        }
        // 更新 RN 页面
        this.setState({ tu });
    };
    _openCamera = () => {
        const options = {
            imageCount: this.props.userinfo.identity === 11 ? 1 : 6, // 最大选择图片数目，默认6
            isCamera: true, // 是否允许用户在内部拍照，默认true
            isCrop: false, // 是否允许裁剪，默认false
            isRecordSelected: true,
            isGif: false, // 是否允许选择GIF，默认false，暂无回调GIF数据
            showCropCircle: false, // 是否显示圆形裁剪区域，默认false
            showCropFrame: true, // 是否显示裁剪区域，默认true
            showCropGrid: false, // 是否隐藏裁剪区域网格，默认false
            quality: 90,//压缩质量
        };
        SyanImagePicker.openCamera(options, (err, photos) => {
            if (err) {
                // 取消选择
                return;
            }
            // 选择成功，渲染图片
            if (this.state.spinner === 1) {
                this.setState(
                    {
                        // tu: photos,
                        tu: this.props.userinfo.identity === 11 ? photos : this.state.tu.concat(photos),
                    },
                    () => {
                        SyanImagePicker.removeAllPhoto();
                        this.setFiles();
                    },
                );
            } else {
                Toast.info(r.msg, 1);
                SyanImagePicker.removeAllPhoto();
            }
            // ...
        });
    };

    render() {
        return (
            <Flex style={{ width: '100%' }} direction={'column'}>
                <View style={styles.container}>
                    {this.state.tu.length === 0 ? (
                        <Flex wrap={'wrap'} style={{ width: 100, height: 100, borderWidth: 0.3 }} justify='center' align='center' onPress={() => this.setState({ visible: true })}>
                            <Image style={styles.images} source={require('~/assets/info/shangchuan.png')} />
                        </Flex>
                    ) : (
                            <Flex direction={'row'} wrap={'wrap'} justify={'start'} align={'start'} style={{ width: '100%', marginTop: 5, marginLeft: 10 }}>
                                {this.state.tu.map((item, index) => (
                                    <Flex
                                        style={{
                                            height: 100,
                                            width: 100,
                                            marginRight: 10,
                                            marginTop: 10,
                                        }}
                                        wrap={'wrap'}
                                        justify={'start'}
                                        align={'start'}>
                                        <Image
                                            style={{
                                                height: '100%',
                                                width: '100%',
                                                resizeMode: 'stretch',
                                                marginRight: 20,
                                            }}
                                            source={{ uri: item.uri }}
                                        />
                                        {this.props.userinfo.identity === 8
                                            ?
                                            <Image
                                                style={{
                                                    height: '100%',
                                                    width: '100%',
                                                    top: 0,
                                                    left: 0,
                                                    position: 'absolute',
                                                    zIndex: 1,
                                                    resizeMode: 'stretch',
                                                }}
                                                source={require('~/assets/info/yezhu.png')}
                                            />
                                            :
                                            <Image
                                                style={{
                                                    height: '100%',
                                                    width: '100%',
                                                    top: 0,
                                                    left: 0,
                                                    position: 'absolute',
                                                    zIndex: 1,
                                                    resizeMode: 'stretch',
                                                }}
                                                source={require('~/assets/info/kaifashang.png')}
                                            />
                                        }
                                        <View style={{ width: '100%', height: '100%', justifyContent: 'flex-end', flexDirection: 'row', position: 'absolute', zIndex: 2, resizeMode: 'stretch' }}>
                                            <Flex
                                                style={{
                                                    height: 30,
                                                    width: 30,
                                                }}
                                                onPress={() => {
                                                    this.handleDeletePhoto(index);
                                                }}>
                                                <Image
                                                    style={{
                                                        height: 30,
                                                        width: 30,
                                                    }}
                                                    source={require('~/assets/info/quxiao.png')}
                                                />
                                            </Flex>
                                        </View>
                                    </Flex>
                                ))}
                                <Flex wrap={'wrap'} style={{ width: 100, height: 100, borderWidth: 0.3, marginTop: 10 }} justify='center' align='center' onPress={() => this.setState({ visible: true })}>
                                    <Image style={styles.images} source={require('~/assets/info/shangchuan.png')} />
                                </Flex>
                            </Flex>
                        )}
                </View>
                <Modal popup visible={this.state.visible} animationType="slide-up" onClose={this.onClose}>
                    <Flex direction={'column'} justify={'center'} align={'center'}>
                        <Button
                            style={{ width: 200, marginTop: 20 }}
                            type={'primary'}
                            onPress={() => {
                                this.onClose();
                                this._openPicker();
                            }}>
                            相册
                        </Button>
                        <Button
                            style={{ width: 200, marginTop: 20 }}
                            type={'primary'}
                            onPress={() => {
                                this.onClose();
                                this._openCamera();
                            }}>
                            拍照
                        </Button>
                        <Button style={{ width: '100%', marginTop: 30 }} type={'warning'} onPress={this.onClose}>
                            取消
                        </Button>
                    </Flex>
                </Modal>
            </Flex>
        );
    }
}
export default connect(mapGetter)(Album)
const styles = StyleSheet.create({
    container: {
        width: '100%',
        flexDirection: 'row',
    },
    images: {
        width: 20,
        height: 20,
        marginTop: '85%',
    },
    textsize: {
        fontSize: 15,
        marginTop: 10,
    },
});
